Describes APIs that are required to use web maps.
Item | URL |
---|---|
Map | https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js |
Static Map | https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/staticMap.js |
Describes how to display maps on the web browser by using Javascript-based NHN Cloud Maps API.
NHN Cloud Maps API adopts Thinkware coordinates: TW, TW X, or TW Y coordinates, in short.
Optional parameters are displayed as [param] for method: they can be omitted.
※ NHN Cloud Maps API adopts Thinkware-only coordinates.
To convert Thinkware coordinates into Latitude/Longitude (WGS84), use the THINKMAP.tw_Wgs84() function. On the contrary, to convert Latitude/Longitude (WGS84) into Thinkware coordinates, use the THINKMAP.wgs84_Tw() function.
API Name | Parameter | Returns | Description |
---|---|---|---|
new thinkware.maps.Map(map_div, option) | map_div : String | DOM element or ID of the element to show maps | |
option.type : String | Map Type 'i': General maps, 'm': Mobile maps, 's': Summary maps, 'a': Aerial maps, 'm_a': Mobile aerial maps, 's_a': Summary aerial maps, 'hybrid': Aerial default: 'i' |
||
option.center.twX : number | X coordinates at map center: by Thinkware coordinates | ||
option.center.twY : number | Y coordinates at map center: by Thinkware coordinates | ||
option.level : number | Level of a map | ||
option.callback : function() | Function to be executed after initialization | ||
option.logo : String | To be located by logos top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right |
||
changeType(type) | type : String | Map Type 'i': General maps, 'm': Mobile maps, 's': Summary maps, 'a': Aerial maps, 'm_a': Mobile aerial maps, 's_a':Summary aerial maps, 'hybrid': Aerial default: 'i' |
|
thinkware.maps.event.addListener(target, event_type, func_cb) | target : Object | Target object to add listeners | |
event_type : String | wheelup, wheeldown, wheel, zoomend, movestart, move, moveend, tileloadstart, tileloadend, tileloaderror, click, dblclick, rightclick, mousemove, mouseup, mousedown |
||
func_cb : function() | Listener for registration | ||
thinkware.maps.event.removeListener(target, event_type, func_cb) | target : Object | Object to remove listener from | |
event_type : String | wheelup, wheeldown, wheel, zoomend, movestart, move, moveend, tileloadstart, tileloadend, tileloaderror, click, dblclick, rightclick, mousemove, mouseup, mousedown |
||
func_cb : function() | Listener for removal | ||
new thinkware.maps.Marker(option) | option.map : Object | The thinkware.maps.Marker marker object | Map object |
option.icon.url : String | Icon URL | ||
option.icon.size.width : number | Icon width | ||
option.icon.size.heigth : number | Icon height | ||
option.position.twX : number | Marker creation x coordinates (by Thinkware coordinates) | ||
option.position.twY : number | Marker creation Y coordinates (by Thinkware coordinates) | ||
option.positioning : String | To be located by coordinates top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right |
||
option.title : String | Character strings for tool-tips | ||
option.offset.pxX : number | By pixel | ||
option.offset.pxY : number | By pixel | ||
option.visible : boolean | Display or not | ||
option.draggable : boolean | If a drag is available | ||
option.zIndex : number | z-index value | ||
option.opacity : number | Opacity level | ||
option.stopEvent : boolean | Whether to prevent map event execution on a marker | ||
thinkware.maps.LineString.drawStart(target, option) | target : Object | Map object | |
option.stroke.style : String | Style of a stroke dot : · · · · · · dash : - - - - - - dashdot : - · - · - · - longdashdot: ㅡ · ㅡ · ㅡ solid: Solid stroke |
||
option.stroke.weight : number | Thickness of a stroke (px) | ||
option.stroke.color : String | Color of a stroke | ||
option.stroke.opacity : number | Opacity of a stroke | ||
option.callback : function() | Function to be executed after drawing is done | ||
option.measure : boolean | Whether to show popups to measure distance | ||
option.isOnce : boolean | Whether to close after one-time drawing | ||
thinkware.maps.LineString.drawEnd(target) | target : Object | Map object | |
thinkware.maps.util.getLonLatFromCoordinate(param) | param.twX : number | Coordinates Object.lon : WGS84 Object.lat : WGS84 |
Thinkware X coordinates |
param.twY : number | Thinkware Y coordinates | ||
thinkware.maps.util.getCoordinateFromLonLat(param) | param.lon : number | TW coordinates Object.twX: TW X coordinates Object.twY : TW Y coordinates |
Longitude |
param.lat : number | Latitude |
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js"></script>
<script>
// Authenticate to enable maps.
Map.authentification("appKey");
</script>
<div id="div_map"></div>
<script type="text/javascript">
//Expose the map on declared DIV.
var map = new thinkware.maps.Map("div_map", {
center: {
twX: 169030,
twY: 517922
},
level: 12,
type: "i",
callback: success = function() {
console.log("map init success!");
}
});
</script>
<script type="text/javascript">
// Change map type of created map object.
// General: i, Mobile: m, Summary: s, Aerial background: a, Mobile aerial: m_a, Summary aerial: s_a, Aerial: hybrid
// Change into aerial background map.
map.changeType('i');
</script>
<script type="text/javascript">
//Register move events on the map.
thinkware.maps.event.addListener(map, 'click', mapEvent_cb)
//Callback function when map event occurs
function mapEvent_cb(event){
console.log("event callback!");
}
</script>
<script type="text/javascript">
//Remove move events from the map.
thinkware.maps.event.removeListener(map, 'move', mapEvent_cb)
</script>
<script type="text/javascript">
// Add marker objects on the map.
var marker = new thinkware.maps.Marker({
map: map,
position: {
twX: 169030,
twY: 517922
},
stopEvent: false
});
// Move marker objects on the map.
marker.setPosition({twX: 169030, twY: 517922});
</script>
<script type="text/javascript">
// Convert into the map drawing mode.
var strokeOpt = {
style : 'longdash' // Stroke style (solid, dash, longdash, ... or refer to functions that return segments) default: "solid"
, weight : 5 // Thinkness of a stroke (px) (default: 3)
, color : '#3399ff' //Color of a stroke (default: #3399ff)
, opacity : 1 //Opacity of a stroke (default: 1)
};
var drawOpt = {
stroke : strokeOpt
, callback : mapDraw_cb // Function to be executed after drawing is done (default: undefined)
, measure : true // Whether to display popup to measure distance (default: false)
, isOnce : false // Whether to close after one drawing (default: false)
};
//thinkware.maps.LineString.drawStart(map, drawOpt);
function mapDraw_cb(map){
console.log("draw finish!!!");
}
</script>
<script type="text/javascript">
// Close the map drawing mode.
thinkware.maps.LineString.drawEnd(map);
</script>
<script type="text/javascript">
// Convert TW coordinates into WGS coordinates.
var tws = {
twX : 169030
, twY: 517922
};
var wgs84 = thinkware.maps.util.getLonLatFromCoordinate(tws);
console.log(wgs84.lon);
console.log(wgs84.lat);
</script>
<script type="text/javascript">
// Convert WGS coordinates into TW coordinates.
var wgs84 = {
lon: 127.11074994024005
, lat: 37.40215870673785
};
var tws = thinkware.maps.util.getCoordinateFromLonLat(wgs84);
console.log(tws.twX);
console.log(tws.twY);
</script>
// Declare js file to enable static maps.
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/staticMap.js"></script>
// Create IMG to contain maps.
<img id='staticMapImg' alt="" src="">
<script>
// Authenticate to enable static maps and deliver parameters.
StaticMap.authentification('staticMapImg',"appkey",'x=157423&y=266836&width=970&height=300&level=10&maptype=i&mx=158323&my=266836&txt=');
</script>
Name | Type | Required | Description |
---|---|---|---|
x | Integer | Required | X coordinates at map center |
y | Integer | Required | Y coordinates at map center |
mx | Integer | Required | Marker x coordinates |
my | Integer | Required | Marker y coordinates |
width | Integer | Optional | Map width 600px by default |
height | Integer | Optional | Map height 600px by default |
imgurl | String | Optional | URL for marker image Basic marker by default |
level | Integer | Optional | Map level 10 by default |
maptype | String | Optional | Map type Basic general map by default |
label | String | Optional | Content of label |
Enable NHN Cloud Maps API, which serves as the same API for Javascript-based web maps, to develop hybrid apps with Android/iOS WebView. Regarding the API, see 1. Web Maps .
<!DOCTYPE html>
<html>
<head>
// Set viewport for each mobile device.
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<style>
body {
margin: 0;
}
#div_map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
// Declare js file to enable maps.
<script type="text/javascript" src="https://kr1-maps.api.nhncloudservice.com/maps/js/v2.0/map.js"></script>
<script>
// uthenticate to enable the maps.
Map.authentification("appKey");
</script>
</head>
<body>
//Create DIV to contain maps.
<div id="div_map"></div>
<script type="text/javascript">
//Mark maps on declared DIV (declare 'm' for the mobile map type.)
var map = new thinkware.maps.Map("div_map", {
center: {
twX: 169030,
twY: 517922
},
level: 12,
type: "m",
callback: success = function() {
console.log("map init success!");
}
});
</script>
</body>
</html>